<html>
    <head>
        <title>郑州市 - 天气预报</title>
        <meta charset="utf-8">
        <style>
            html,body{
                width: 100%;
                height: 100%;
                margin: 0;
                text-shadow: 1px 0px 1px #333;
                background-image: linear-gradient(to bottom, rgb(13, 104, 188), rgb(114, 173, 224));
                background-color: rgb(114, 173, 224);
                background-repeat: no-repeat;
                overflow: hidden;
            }
            header{
                text-align: center;
                color: white;
                font-size: 19px;
                line-height: 50px;
            }
            main .icon{
                margin: 40px;
                background-image: url(days/xue.png);
                height: 128px;
                background-repeat: no-repeat;
                background-position: center center;
            }
            main .tempers{
                text-align: center;
                font-size: 32px;
                color: white;
                font-family: Arial;
            }
            main sup{
                font-size: 19px;
            }
            main .weather{
                text-align: center;
                color: white;
                font-size: 17px;
            }
            main .wind{
                text-align: center;
                color: white;
                font-size: 13px;
                line-height: 200%;
            }
            main .current{
                text-align: center;
                color: white;
                font-size: 13px;
            }
            footer{
                width: 90%;
                color: white;
                text-align: center;
                margin: 60px auto;
                font-size: 13px;
            }
            section{
                width: 33.3333333333333%;
                float: left;
                border-right: solid 1px #aaf;
                box-sizing: border-box;
            }
            section:nth-child(3){
                border: none;
            }
            section .icon{
                height: 60px;
                margin: 15px auto;
                background-image: url(days/qing.png);
                background-repeat: no-repeat;
                background-size: 60px;
                background-position: center center;
                opacity: 0.7;
            }
        </style>
    </head>
    <body>
        <header>郑州市</header>
        <main>
            <div class="icon"></div>
            <div class="tempers">&nbsp; -13 ~ 2<sup>℃</sup></div>
            <div class="weather">小雪</div>
            <div class="wind">微风</div>
            <div class="current">实时温度：13℃，空气指数 135 轻度污染</div>
        </main>
        <footer>
            <section>
                <div class="week">周二</div>
                <div class="icon"></div>
                <div class="temper">13 ~ 5℃</div>
                <div class="weather">晴</div>
                <div class="wind">微风</div>
            </section>
            <section>
                <div class="week">周三</div>
                <div class="icon"></div>
                <div class="temper">13 ~ 5℃</div>
                <div class="weather">晴</div>
                <div class="wind">微风</div>
            </section>
            <section>
                <div class="week">周四</div>
                <div class="icon"></div>
                <div class="temper">13 ~ 5℃</div>
                <div class="weather">晴</div>
                <div class="wind">微风</div>
            </section>
            <div style="clear:left;"></div>
        </footer>
        <script>
            function Flake(){
                var f = document.createElement('img');
                var h = document.documentElement.clientHeight;
                var w = document.documentElement.clientWidth;
                var top = h * Math.random();
                var left = w * Math.random();
                
                f.src = 'flake.png';
                f.style.position = 'absolute';
                f.style.top = top + 'px';
                f.style.left = left + 'px';
                f.style.transform = 'scale(' + Math.random() / 4 + ')';
                
                document.body.appendChild(f);
                
                function down(){
                    top += Math.random() * 10;
                    left += Math.random() * 5;
                    
                    if(top > h) top = -100;
                    if(left > w) left = -100;
                    
                    f.style.top = top + 'px';
                    f.style.left = left + 'px';
                }
                
                setInterval(down, 50);
            }
            
            for(var i = 0; i < 50; i++){
                new Flake();
            }
            
        </script>
    </body>
</html>